<template>
	<div class="cont">
		<p class="searchbox">
			<input type="text" placeholder="input a word to search" v-model="word">
		</p>
		<button @click="onClickSearch()">Search</button>
	</div>
</template>

<script>
export default{
	name:"SearchBar",
	data(){
		return {
			word:""
		}
	},
	methods:{
		onClickSearch:function(){
			if(this.word.trim()!=''){
				var pt=/^[a-zA-Z]+$/;
				if(pt.test(this.word.trim())){
					this.$emit('search-word',this.word.trim(),'[success]')
				}else{
					alert('搜索的单词包含a-z之外的字符')
				}

			}
		}
	}
}
</script>

<style scoped>
	.cont{
		display: grid;
		width:80%;
		margin:0 auto;
		padding: 20px 0;
		grid-template-columns: 1fr 88px;
	}
	.searchbox{
		border-radius: 4px;
		border:1px solid #98afc7;
		height: 48px;
	}
	.searchbox input{
		outline:none;
		border:none;
		line-height: 48px;
		padding: 0 10px;
		width: 98%;
		background: transparent;
	}
	.searchbox input:focus{
		outline: none;
		border:none;
	}
	button{
		margin-left: 10px;
		height: 48px;
		margin-top: 16px;
	}
</style>